About This Layout

This page is styled with CSS. It demonstrates a float-based three-column layout with fixed width.

The Concept

The five structural <div> elements — header, nav, content, promo and footer — nest inside a fixed width containing <div>. The three columns, nav, content and promo, are sized with percentages and are floated so they sit side by side. The footer is cleared so it sits beneath whichever of the floated columns is longest.

Auto left and right margin settings are applied to the fixed-width containing <div>, which makes the layout center in a wide browser window.

The Files

This example uses two CSS files to style the page:

  1. three_column_fixed_widthCSS.css
  2. text_n_colorsCSS.css

The XHTML markup file is called:

  • three column fixed width layout.html

Note: Inner <div> elements inside each of the five main <div> elements allow padding and borders to be applied without affecting the width of the main structural <div> elements.